<template>
<div style="width: 100%">
    <table style="width: 100%">
      <tr>
        <td style="width:200px">
            XX系统西乡塘系统
        </td>
        <td>
        <el-menu :default-active="1" class="el-menu-demo" mode="horizontal" >
          <el-menu-item v-for="tab in obj.tabs"
            :key="tab.children"
            :index="tab.id"
            :class="tab.id"
            @click="sendMenu( tab.children)"
          >
            {{ tab.title }}  </el-menu-item>

        </el-menu>
        <div class="line"></div>
        </td>

        <td align=right>
            <el-dropdown>
          <span class="el-dropdown-link">
            用户名<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        </td>
 </tr>
    </table>
</div>

 
</template>

<script>
import { reactive } from '@vue/reactivity'

  export default {
    setup (props,{attrs,slots,emit}) {
      const obj=reactive({
        tabs: [{
                id: "1",
                title:'百年孤独1',
                author:'马尔克斯',
                pubdata:'2000',
                children:[{
                    id: "CompA",
                    title:'百年孤独16',
                    target:'aBoo',
                    pubdata:'2000',
                },
                {
                    id: "CompB",
                    title:'百年孤独19',
                    target:'aBooT',
                    pubdata:'2000',
                }]
            }, {
                id: "2",
                title:'百年孤独2',
                author:'马尔克斯',
                pubdata:'2000',
                children:[{
                    id: "1.2",
                    title:'百年孤独11',
                    target:'About',
                    pubdata:'2000',
                }]
            }, {
                id: "3",
                title:'百年孤独3',
                author:'马尔克斯',
                pubdata:'2000',
                children:[{
                    id: "1.13",
                    title:'百年孤独12',
                    target:'user/hello',
                    pubdata:'2000',
                }]
            }]
      })
      const sendMenu=(data)=>{
          emit('getMenu',data )
      };
      return {
        obj,
        sendMenu
      }
    },mounted() {
      this.$nextTick(function () {
      this.sendMenu( this.obj.tabs[0].children)
    })
}
  }

  
</script>